<template>
  <div class="container-randoms">
    <el-card>
      <div class="top-container">
        <!-- 表单
        设置 inline 属性可以让表单域变为行内的表单域   el-row 和 el-col  是layout组件下的-->
        <el-row>
          <el-col :span="18">
            <!-- :inline="true" -->
            <el-form inline size="small">
              <el-form-item label="关键字" label-width="80px">
                <el-input
                  placeholder="根据编号搜索"
                  v-model="requestParameters.keyword"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6"></el-col>
            <!-- 按钮 -->
          <div style="float :right">
            <el-button size="small" @click="clear"> 清除</el-button>
            <el-button size="small" type="primary" @click="search" >搜索</el-button>
          </div>
        </el-row>
      </div>
      <!-- 提示信息  closable属性决定是否可关闭，接受boolean，默认为true-->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 数据   prop="questionIDs"-->
      <el-table :data="items">
        <el-table-column prop="id" label="编号" width="190px" > </el-table-column>
        <el-table-column :formatter="questionTypeFn" prop="questionType" label="题型" width="80px">
        </el-table-column>
        <el-table-column  label="题目编号" width="190px" prop="questionIDs" >
          <!-- 自定义列的内容，参数为 { row, column, $index } -->
          <template #default ="{row}">
           <!-- {{row.questionIDs}} -->
            <div v-for="item in row.questionIDs" :key="item.number" >
              <a href="#"  @click.prevent="OpenDialog(item)" style="color:rgb(0, 153, 255)">{{item.number}}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" >
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" >
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" >
        </el-table-column>
        <el-table-column prop="userName" label="录入人" >
        </el-table-column>
        <el-table-column prop="operation" label="操作" >
          <template #default ="{row}">
            <!-- {{row.id}} -->
          <el-button @click="del(row.id)" type="danger" plain icon="el-icon-delete" circle class="el-button-danger"></el-button>
          </template >
        </el-table-column>
      </el-table>
      <!-- end -->
      <!-- 分页 paginationPage 当前点击的这一页
                paginationPagesize 一页里包含几条数据-->
      <div class="pagination">
        <Pagination
        :paginationPage="requestParameters.page"
        :paginationPagesize="requestParameters.pagesize"
        :counts ="counts"
        @PageSizeChange="handleSizeChange"
        @PageChange="handleCurrentChange"
        >
        </Pagination>
        <!-- 弹框 -->
      </div>
      <!-- end -->
    </el-card>
        <Dialog :showDialog.sync="showDialog" :myData="myData" ></Dialog>
  </div>
</template>

<script>
// 导入替换字段
import { questionType } from '../../api/hmmm/constants'
// 导入请求
// import { randoms } from '.../../../src/api/hmmm/questions'
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import Pagination from '../components/Pagination'
import Dialog from '../components/questions-xzq.vue'
export default {
  name: 'randoms',
  // 组件注册
  components: {
    Pagination,
    Dialog
  },
  data () {
    return {
      // 定义一个对象
      myData: {},
      showDialog: false,
      // 提示信息
      alertText: '',
      // 总记录数
      counts: 400,
      items: [
        {
          id: '1', // 编号
          questionType: '1', // 题型--题组类型
          questionIDs: '1', // 题目编号 --试题ID
          addTime: '1', // 录入时间 --组题时间
          totalSeconds: '1', // 答题总耗时秒
          accuracyRate: '1', // 正确率
          userName: '1' // 录入人
        }
      ],
      // 请求参数--page -pagesize
      requestParameters: {
        page: 1,
        pagesize: 20,
        keyword: ''
      }

    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    // 每页显示信息条数
    handleSizeChange (val) {
      console.log('每页几条-父', val)
      this.requestParameters.pagesize = val
      // 修改了每页条数后, 会造成页数的变化, 推荐从第一页重新开始展示
      // 重置当前页 ---重行调用函数渲染页面
      this.requestParameters.page = 1
      this.getRandoms()
    },
    // 进入某一页
    handleCurrentChange (val) {
      console.log('当前页-父', val)
      this.requestParameters.page = val
      this.getRandoms()
    },
    // 发送请求获取渲染数据
    async getRandoms () {
      console.log(11111)
      const { data } = await randoms({
        ...this.requestParameters
      })
      // this.$message.success('请求成功')
      console.log('组题列表', data)
      this.counts = data.counts
      this.alertText = `数据一共 ${this.counts} 条`
      this.requestParameters.page = Number(data.page)
      this.requestParameters.pagesize = Number(data.pagesize)
      this.items = data.items
    },
    // 函数用于格式化表格里的内容
    questionTypeFn (row, column, cellValue, index) {
      // console.log(row, column, 'cellValue======>', cellValue, index)
      // console.log('看看代替字段', questionType)
      // 简写
      const res = questionType.find(item => item.value === +cellValue)
      // console.log(res, '映射')
      return res ? res.label : '未知'
    },
    // 搜索
    search () {
      console.log('点击了')
      // 在此业务中 关键字是双向绑定的，如果其他页面有需要改动的参数在搜索前改即可
      this.requestParameters.page = 1
      this.getRandoms()
    },
    // 清除
    clear () {
      this.requestParameters = {
        page: 1,
        pagesize: 20,
        keyword: ''
      }
    },
    // 删除数据
    async del (id) {
      console.log('-------', id)
      const res = await removeRandoms({ id })
      console.log('======>', res)
      this.getRandoms()
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(() => {
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    // 点击弹框--弹框打开渲染数据
    OpenDialog (data) {
      this.showDialog = true
      console.log('----->data', data)
      this.myData = data
      console.log('传好了===》', this.myData)
      // const { data } = await detail({ id })
      // console.log('基础题库详情', data)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
//给el-card 外面的大盒子设置内边距
.container-randoms {
  padding: 10px 10px;

}
//提示信息样式
.alert {
  // margin: 0px 0px 15px 0; //上右下左
  margin-bottom: 15px;
}
//分栏样式
.pagination {
  margin-top: 10px;
  text-align: right;
}
//element组件提供的删除按钮样式
// .el-button-danger{
//     color: #f56c6c;
//     background: #fef0f0;
//     border-color: #fbc4c4;
//     font-size: 12px;
//     border-radius: 50%;
// }
//给分页添加的样式
.container-randoms {
  //深度作用域选择器
  ::v-deep {
    .el-pagination__jump{
      //调节当页几条和当前页的位置
      margin-left: 0;
    }
    // .el-pagination .btn-prev,.el-pagination .btn-next ,.el-pagination .el-pager li {
    //   background-color: #f4f4f5;
    //   margin: 0 5px;
    //   border-radius: 2px;
    //   min-width: 30px;
    // }
    // .el-pagination .el-pager li:not(.disabled).active{
    //     background-color: #409eff;
    //     color: #fff;
    // }
  }
}
</style>
